import { useEffect } from 'react'
import { useRef } from 'react'
import * as echarts from 'echarts'
import { useState } from 'react'

let option = {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%']
    }
  },
  title: {
    left: 'center',
    text: '打卡记录'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'time',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100
    },
    {
      start: 0,
      end: 20
    }
  ],
  series: [
    {
      name: '打卡',
      type: 'line',
      smooth: true,
      symbol: 'none',
      areaStyle: {},
      data: []
    }
  ]
}

export default () => {
  const ref = useRef()
  const [totTimes, setTotTimes] = useState(0)
  const [continueTimes, setContinueTimes] = useState(0)
  useEffect(() => {
    let clockTimes = JSON.parse(localStorage.getItem('clockTimes'))
    if (clockTimes === null) {
      clockTimes = []
      let timeStart = +new Date() - 86400000 * 10
      for (let i = 0; i < 10; i++) {
        const date = new Date(timeStart)
        clockTimes.push(`${date.getFullYear()}-${date.getMonth()}-${date.getDay()}`)
        timeStart += 86400000
      }
      localStorage.setItem('clockTimes', JSON.stringify(clockTimes))
    }
    clockTimes.sort()
    const data = []
    let totTimes = 0
    clockTimes.forEach(item => {
      // 随机处理
      let random = 1
      if (parseInt(item.split('-')[2]) % 3) {
        random = 1
      } else {
        random = 0
      }
      if (random) {
        totTimes++
      }
      data.push([item, random])
    })
    option.series[0].data = data

    setTotTimes(totTimes)
    totTimes = 0
    for (let i = data.length - 1; i >= 0; i--) {
      if (data[i][1]) {
        totTimes++
      } else {
        break
      }
    }
    setContinueTimes(totTimes)

    // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
    const chart = echarts.init(ref.current)

    console.log(option.series[0].data)
    // 设置图表实例的配置项和数据
    chart.setOption(option)

    // 组件卸载
    return () => {
      // myChart.dispose() 销毁实例。实例销毁后无法再被使用
      chart.dispose()
    }
  }, [localStorage.getItem('clockTimes')])
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ fontSize: '24px', fontWeight: '800', margin: '20px', fontFamily: 'STFangsong' }}>学习记录</div>
      <div style={{ fontSize: '18px', fontWeight: '800', margin: '10px', fontFamily: 'STFangsong' }}>
        累计打卡次数:{' '}
        <font color="#ff6741">
          <strong>{totTimes}</strong>
        </font>
      </div>
      <div style={{ fontSize: '18px', fontWeight: '800', marginTop: '10px', marginBottom: '40px', fontFamily: 'STFangsong' }}>
        连续打卡天数:{' '}
        <font color="#ff6741">
          <strong>{continueTimes}</strong>
        </font>
      </div>
      <div ref={ref} style={{ width: '500px', height: '500px' }}></div>
    </div>
  )
}
